
//初始化echarts的实例

function test1() {
    var myChart = echarts.init(document.getElementById('foot'))
    myChart.resize({
        width: 550,
        height: 200
    });
    //调用实例中的setOption方法绘制图表
    myChart.setOption({

        tooltip: {
            trigger: 'item',
            transitionDuration: 0
        },
        // gird: {
        //     left: '30%',
            
        // },
        graphic: [
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    text: '5132',
                    textAlign: 'center',
                    fill: '#f8f8f8',
                    width: 30,
                    height: 30,
                    fontSize: 20,
                    fontFamily: "Microsoft YaHei",
                    fontWeight: 'bold',
                }
            },
            {
                type: 'text',
                left: 'center',
                top: '60%',
                style: {
                    text: '总体',
                    textAlign: 'center',
                    fill: '#666',
                    width: 30,
                    height: 30,
                    fontSize: 16,
                    fontFamily: "Microsoft YaHei",

                }
            }
        ],
        series: [
            {
                name: '字段名称:',
                type: 'pie',
                radius: ['50%', '70%'],
                // roseType的属性有两个，分别是radius和area，如果设置为radius，则每个扇形的占比会按照数值，大小来确定半径的大小，但是扇形的宽度是相等的；如果设置为。'area'，则每个扇形的占比会按照数值大小来确定扇形面积的大小，这样可以实现扇形宽度不同的效果。
                roseType: 'area',

                data: [

                    { value: 200, name: '1055万' },
                    { value: 400, name: '1532万' },
                    { value: 500, name: '1942万' }
                ],
                color: ['#83f967', '#fbfe27', '#ff3040'],
                emphasis: {
                    scale: true,
                    scaleSize: 10
                }
            },
        ],
        textStyle: {
            fontSize: 20,
            fontStyle: "normal",
            fontWeight: "bolder"

        }, stateAnimation: {
            duration: 300,
            easing: "cubicOut",

        }, label: {
            color: '#ff0'
        }

    });

}
test1()
